import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  ScrollView,
  Modal,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
  Image
} from 'react-native'
import React, { useState, useEffect } from 'react'
import { Switch } from '@rneui/themed';
// 弹出层  第三方库
import Checkbox from 'expo-checkbox'; // 复选框



export default function GaiZhang() {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [email, setEmail] = useState('');
  const [address, setAddress] = useState('');
  const [address0, setAddress0] = useState('');
  const [workunit, setWorkunit] = useState('');
  const [department, setDepartment] = useState('');
  const [received, setReceived] = useState('');
  const [department1, setDepartment1] = useState('');
  const [modalVisible, setModalVisible] = useState(false);
  const [modalVisible1, setModalVisible1] = useState(false);
  const [loading, setLoading] = useState(false); // 控制加载状态
  const [checked, setChecked] = useState(false); // 控制开关状态
  const [isChecked1, setChecked1] = useState(false); // 控制开关状态
  const [isChecked2, setChecked2] = useState(false); // 控制开关状态
  const [isChecked3, setChecked3] = useState(false); // 控制开关状态
  const [modalVisible5, setModalVisible5] = useState(false);
  const arr = ['MD-医生', 'MM-医学硕士', 'MS-医学学士', 'Ph.D-理学博士', 'Pham.D-药学博士', 'RN-注册护士', '其他'];

  const sheng = ["安徽省", "福建省", "甘肃省", "广东省", "贵州省",
    "海南省", "河北省", "河南省", "湖北省"
    , "湖南省", "江苏省", "江西省", "辽宁省",
    "内蒙古自治区", "宁夏回族自治区", "青海省", "山东省", "山西省", "陕西省", "上海市", "四川省", "台湾省", "天津市", "西藏自治区", "香港特别行政区", "新疆维吾尔自治区", "云南省", "浙江省", "重庆市"
  ]
  const shi = [
    "石家庄市", "唐山市", "保定市", "邯郸市", "张家口市", "宁波市", "杭州市",
    "宁波市", "温州市", "襄阳市", "绍兴市", "湖州市", "深圳市", "汕头市",
    "洛阳市", "开封市", "宜昌市", "新乡市", "南阳市", "福州市", "厦门市",
  ]
  const qu = [
    "东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区",
    "房山区", "黄浦区", "花都区", "徐汇区", "从化区", "增城区", "金牛区",
    "西湖区", "下城区", "上城区", "新郑区", "金堂区", "青白江区", "成华区",
  ]
  const ji1 = [
    "正高级", "副高级", "中级", "初级"
  ]
  const jishi = [
    "主治医师", "住院医师", "医师", "医士", "医助",
    "主任医师", "主任药师", "主任护师", "主任技师", "教授", "研究员"
  ]
  const [sheng1, setSheng1] = useState('河北省');
  const [shi1, setShi1] = useState('邯郸市');
  const [qu1, setQu1] = useState('成华区');

  const [ji, setJi] = useState('正高级');
  const [jishi1, setJishi1] = useState('主治医生');




  useEffect(() => {
    setAddress0(sheng1 + "-" + shi1 + "-" + qu1);
    setDepartment1(ji + "-" + jishi1);

  }, [])


  const setReceivew = (value: string) => {
    setReceived(value);
    setModalVisible(false);
  }
  const setReceivew1 = (value: string) => {
    setSheng1(value);
  }
  const setReceivew2 = (value: string) => {
    setShi1(value);
  }
  const setReceivew3 = (value: string) => {
    setQu1(value);
    setModalVisible1(false)
  }
  const setReceive12 = (value: string) => {
    setJi(value);
  }
  const setReceive127 = (value: string) => {
    setJishi1(value);
    setModalVisible5(false)
  }

  const handleSave = () => {
    // 设置加载状态为 true
    setLoading(true);

    // 模拟延迟操作（比如调用API或其他操作）
    setTimeout(() => {
      // 完成后关闭加载状态
      setLoading(false);

      // 弹出加载成功的提示框
      Alert.alert('加载成功', '数据已成功保存！');
    }, 3000); // 模拟3秒的加载时间
  };
 
  return (
    <View style={{ padding: 15, width: '100%' }}>
      <ScrollView>
        <Text>基本资料</Text>
        <View style={styles.container111}>
          <Text>真实姓名    </Text>
          <TextInput
            style={styles.input}
            placeholder="请输入真实姓名"
            onChangeText={setName}
            value={name}
          />
        </View>
        <View style={styles.container1}>
          <Text>真实姓名    </Text>
          <TextInput
            style={styles.input}
            placeholder="18033441984"
            onChangeText={setPhone}
            value={phone}
          />
        </View>
        <View style={styles.container1}>
          <Text>邮箱地址    </Text>
          <TextInput
            style={styles.input}
            placeholder="输入邮箱地址"
            onChangeText={setEmail}
            value={email}
          />
        </View>
        <View style={styles.container1}>

          <Text>教育程度    </Text>
          <TextInput
            style={styles.input}
            placeholder="教育程度"
            onChangeText={setReceived}
            value={received}
            onFocus={() => setModalVisible(true)}
          />

          <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => setModalVisible(false)}
          >
            <View style={styles.modalContainer}>
              <View style={styles.modalContent}>
                <Text style={styles.modalTitle}>教育程度</Text>

                <ScrollView
                  style={{ height: 180 }}
                  // 右边下拉条隐藏
                  showsVerticalScrollIndicator={false}
                >
                  {arr.map((item, index) => (
                    <TouchableOpacity
                      key={index}
                      onPress={() => {
                        setReceivew(item)
                      }}
                    >
                      <View key={index} style={styles.section}>
                        <Text style={styles.paragraph1}>{item}</Text>
                      </View>
                    </TouchableOpacity>
                  ))}
                </ScrollView>
                <Button title="取消" onPress={() => setModalVisible(false)} />
              </View>
            </View>
          </Modal>



        </View>
        <View style={styles.container1}>
          <Text>性别    </Text>
          <View style={styles.section}>
            <Checkbox style={styles.checkbox} value={isChecked1} onValueChange={setChecked1} />
            <Text style={styles.paragraph}>男</Text>
          </View>
          <View style={styles.section}>
            <Checkbox style={styles.checkbox} value={isChecked2} onValueChange={setChecked2} />
            <Text style={styles.paragraph}>女</Text>
          </View>
          <View style={styles.section}>
            <Checkbox style={styles.checkbox} value={isChecked3} onValueChange={setChecked3} />
            <Text style={styles.paragraph}>保密</Text>
          </View>


        </View>
        <View style={styles.container1}>
          <TouchableOpacity
            onPress={() => setModalVisible(true)}
          >
            <Text>所在区域    </Text>
          </TouchableOpacity>
          <TextInput
            style={styles.input}
            placeholder="选择所在区域"
            onChangeText={setAddress0}
            value={address0}
            onFocus={() => setModalVisible1(true)}
          />
          <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible1}
            onRequestClose={() => setModalVisible1(false)}
          >
            <View style={styles.modalContainer}>
              <View style={styles.modalContent}>
                <Text style={styles.modalTitle}>选择区域</Text>
                <View style={styles.Fovr}>
                  <View
                    style={{ width: 80 }}
                  >
                    <ScrollView
                      style={{ height: 180 }}
                      // 右边下拉条隐藏
                      showsVerticalScrollIndicator={false}
                    >
                      {sheng.map((item, index) => (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            setReceivew1(item)
                          }}
                        >
                          <View key={index} style={styles.section}>
                            <Text style={styles.paragraph1}>{item}</Text>
                          </View>
                        </TouchableOpacity>
                      ))}
                    </ScrollView>
                  </View>
                  <View
                    style={{ width: 80 }}
                  >
                    <ScrollView
                      style={{ height: 180 }}
                      // 右边下拉条隐藏
                      showsVerticalScrollIndicator={false}
                    >
                      {shi.map((item, index) => (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            setReceivew2(item)
                          }}
                        >
                          <View key={index} style={styles.section}>
                            <Text style={styles.paragraph1}>{item}</Text>
                          </View>
                        </TouchableOpacity>
                      ))}
                    </ScrollView>
                  </View>
                  <View>
                    <ScrollView
                      style={{ height: 180 }}
                      // 右边下拉条隐藏
                      showsVerticalScrollIndicator={false}
                    >
                      {qu.map((item, index) => (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            setReceivew3(item)
                          }}
                        >
                          <View key={index} style={styles.section}>
                            <Text style={styles.paragraph1}>{item}</Text>
                          </View>
                        </TouchableOpacity>
                      ))}
                    </ScrollView>
                  </View>
                </View>


                <Button title="取消" onPress={() => setModalVisible1(false)} />
              </View>
            </View>
          </Modal>






        </View>
        <View style={styles.container1}>
          <Text>详细地址    </Text>
          <TextInput
            style={styles.input}
            placeholder="输入详细地址"
            onChangeText={setAddress}
            value={address}
          />
        </View>
        <View style={styles.container146}>
          <Text>工作单位    </Text>
          <TextInput
            style={styles.input}
            placeholder="输入工作单位"
            onChangeText={setWorkunit}
            value={workunit}
          />
        </View>
        <View style={styles.container1}>
          <Text>科室    </Text>
          <TextInput
            style={styles.input}
            placeholder="输入科室"
            onChangeText={setDepartment}
            value={department}
          />
        </View>
        <View style={styles.container1}>

          <Text>职称    </Text>
          <TextInput
            style={styles.input}
            placeholder="选择职称"
            onChangeText={setDepartment1}
            value={department1}
            onFocus={() => setModalVisible5(true)}
          />


          <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible5}

          >
            <View style={styles.modalContainer}>
              <View style={styles.modalContent}>
                <Text style={styles.modalTitle}>选择职称 </Text>
                <View style={{ flexDirection: 'row' }}>
                  <View
                    style={{ width: 150 }}
                  >
                    <ScrollView
                      style={{ height: 180 }}
                      // 右边下拉条隐藏
                      showsVerticalScrollIndicator={false}
                    >
                      {ji1.map((item, index) => (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            setReceive12(item)
                          }}
                        >
                          <View key={index} style={styles.section}>
                            <Text style={styles.paragraph1}>{item}</Text>
                          </View>
                        </TouchableOpacity>
                      ))}
                    </ScrollView>
                  </View>
                  <View
                    style={{ width: 80 }}
                  >
                    <ScrollView
                      style={{ height: 180 }}
                      // 右边下拉条隐藏
                      showsVerticalScrollIndicator={false}
                    >
                      {jishi.map((item, index) => (
                        <TouchableOpacity
                          key={index}
                          onPress={() => {
                            setReceive127(item)
                          }}
                        >
                          <View key={index} style={styles.section}>
                            <Text style={styles.paragraph1}>{item}</Text>
                          </View>
                        </TouchableOpacity>
                      ))}
                    </ScrollView>
                  </View>
                </View>


                <Button title="取消" onPress={() => setModalVisible5(false)} />
              </View>
            </View>
          </Modal>







        </View>
        <Text style={{ marginTop: 10 }}>隐私设置</Text>
        <View style={styles.container1461}>
          <Text>消息推送                                                 </Text>
          <Switch
            value={checked}
            onValueChange={(value) => setChecked(value)}
          />
        </View>


        {/* <Text style={{ marginTop: 10 }}>照片上传</Text>

        <View style={{ marginTop: 10 }}>
         <Text>上传照片</Text>
        </View> */}



        <TouchableOpacity onPress={handleSave} disabled={loading} style={{ padding: 10, backgroundColor: '#007BFF', borderRadius: 5, marginTop: 15 }}>
          <Text style={{ color: 'white' }}>{loading ? '正在保存...' : '保存'}</Text>
        </TouchableOpacity>
        {loading && <ActivityIndicator size="large" color="#0000ff" style={{ marginTop: 20 }} />}


      </ScrollView>





    </View>

  )
}

const styles = StyleSheet.create({
  Fovr: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: 200,
  },
  title: {
    fontSize: 18,
    marginBottom: 20,
  },
  picker: {
    height: 50,
    width: 250,
    marginVertical: 10,
  },
  selectedText: {
    marginTop: 20,
    fontSize: 16,
  },

  section: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  paragraph: {
    fontSize: 15,
  },
  paragraph1: {
    fontSize: 15,
    marginLeft: 10,
    marginTop: 10,
  },
  checkbox: {
    margin: 8,
  },
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  radioButton: {
    marginVertical: 10,
  },
  radioButtonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  radioButtonOuterCircle: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  radioButtonInnerCircle: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#007AFF',
  },
  radioButtonLabel: {
    marginLeft: 10,
    fontSize: 16,
  },
  selectedOptionText: {
    marginTop: 20,
    fontSize: 18,
    fontWeight: 'bold',
  },
  picker: {
    height: 50,
    width: '70%',
  },
  container111: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    marginTop: 10,
    borderColor: '#e4e4e4',
  },
  container1: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    borderColor: '#e4e4e4',
    marginTop: -11,
  },
  container146: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    borderColor: '#e4e4e4',
    marginTop: 5,
  },
  container1461: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    borderColor: '#e4e4e4',
    marginTop: 15,
  },
  input: {
    height: 40,
    width: 200,
  },
  selectBtn: { paddingLeft: 10, paddingRight: 10 },
  selectArea: { paddingBottom: 50 },
  selectStatusTrue: { color: "#05a5d1" },
  selectProvinceAreaTxt: { height: 30, paddingLeft: 15, lineHeight: 30, paddingRight: 15 },
  hide: { display: "none" },
  show: {},
  FashionAddLine: {
    height: 60,
    borderBottomWidth: 2,
    borderBottomColor: "rgba(224,224,224,0.50)",
    flexDirection: "row"
  },
  FashionAddLineLabel: {
    width: 95,
    paddingLeft: 15,
    justifyContent: "center",
    alignItems: "flex-start",
  },
  FashionAddLine2: {
    height: 75,
    borderBottomColor: "#F8F8F8",
    borderBottomWidth: 10,
  },
  sku: {
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,.5)"
  },
  skuBackImg: {
    position: "absolute",
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
  openProvinceCityAreaContentWarp: {
    position: "absolute",
    left: 0,
    bottom: 0,
    right: 0,
    height: 310,
    backgroundColor: "#ffffff",
  },
  skuTitle: {
    height: 50,
    position: "relative",
    borderBottomWidth: 1,
    borderBottomColor: "rgba(224,224,224,0.50)",
    alignItems: "center",
    justifyContent: "center",
  },
  skuTitleTxt: {
    fontSize: 16,
    color: "#4f4f4f",
  },
  skuContentClose: {
    width: 48,
    height: 48,
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    top: 0,
    right: 0,
  },
  skuContentCloseIcon: {
    color: "#9B9B9B",
    fontSize: 12,
  },
  openProvinceCityAreaContent: {
    height: 260,
  },
  openProvinceCityAreaContentA: {
    height: 40,
    borderBottomColor: '#ddd',
    borderBottomWidth: 1,
    flexDirection: 'row',
    justifyContent: "flex-start",
    alignItems: "center",
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    width: '80%',
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  titleItem: {
    paddingVertical: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  titleText: {
    fontSize: 16,
  },
})